<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns:th="http://thyneleaf.org">

<head>
    <meta charset="utf-8">
    <title>Software Metrics By Software Engineering</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description">
    <meta content="Themesdesign" name="author">
    <!-- datepicker -->
    <link href="/css/datepicker.min.css" rel="stylesheet" type="text/css">

    <!-- jvectormap -->
    <link href="/css/jqvmap.min.css" rel="stylesheet">

    <!-- Bootstrap Css -->
    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <!-- Icons Css -->
    <link href="/css/icons.min.css" rel="stylesheet" type="text/css">
    <!-- App Css-->
    <link href="/css/app.min.css" rel="stylesheet" type="text/css">
    <!--editor css-->
    <link href="editor.md-master//css/editormd.css" rel="stylesheet"/>

    <!-- nestable2 css -->
    <link rel="stylesheet" href="/css/jquery.nestable.min.css">
</head>

<body data-topbar="colored">

<!-- Begin page -->
<div id="layout-wrapper">

    <header id="page-topbar">
        <div class="navbar-header">
            <div class="d-flex">
                <!-- LOGO -->
                <div class="navbar-brand-box">
                    <a href="" class="logo logo-dark">
                                <span class="logo-sm">
                                    <img src="/newImage/logo.png" alt="" height="60">
                                </span>
                        <span class="logo-lg">
                                    <img src="/newImage/logo.png" alt="" height="60">
                                </span>
                    </a>

                    <a href="" class="logo logo-light">
                                <span class="logo-sm">
                                    <img src="/picture/logo-sm-light.png" alt="" height="22">
                                </span>
                        <span class="logo-lg">
                                    <img src="/picture/logo-light.png" alt="" height="20">
                                </span>
                    </a>
                </div>

                <button type="button" class="btn btn-sm px-3 font-size-24 header-item waves-effect" id="vertical-menu-btn">
                    <i class="mdi mdi-backburger"></i>
                </button>

                <!-- App Search-->
                <form class="app-search d-none d-lg-block">
                    <div class="position-relative">
                        <input type="text" class="form-control" placeholder="Search...">
                        <span class="mdi mdi-magnify"></span>
                    </div>
                </form>
            </div>

            <div class="d-flex">

                <div class="dropdown d-inline-block d-lg-none ml-2">
                    <button type="button" class="btn header-item noti-icon waves-effect" id="page-header-search-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="mdi mdi-magnify"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right p-0" aria-labelledby="page-header-search-dropdown">

                        <form class="p-3">
                            <div class="form-group m-0">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Search ..." aria-label="Recipient's username">
                                    <div class="input-group-append">
                                        <button class="btn btn-primary" type="submit"><i class="mdi mdi-magnify"></i></button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>


            <div class="col-md-4">
                <div class="float-right d-none d-md-block">
                    <div class="dropdown">
                        <button class="btn btn-light btn-rounded dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="mdi mdi-settings-outline mr-1"></i> Settings
                        </button>
                        <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Separated link</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </header>

    <!-- ========== Left Sidebar Start ========== -->
    <div class="vertical-menu">

        <div data-simplebar="" class="h-100">

            <!--- Sidemenu -->
            <div id="sidebar-menu">
                <!-- Left Menu Start -->
                <ul class="metismenu list-unstyled" id="side-menu">
                    <li class="menu-title">Menu</li>

                    <li>
                        <a href="/to/index" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-airplay"></i></div>
                            <span>首            页</span>
                        </a>
                    </li>
                    <li class="menu-title">Basic</li>
                    <li>
                        <a href="/size/goToSize" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-window-grid"></i></div>
                            <span>传统度量</span>
                        </a>
                    </li>

                    <li>
                        <a href="/to/functionPoint" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-schedule"></i></div>
                            <span>功能点度量</span>
                        </a>
                    </li>

                    <li>
                        <a href="/to/featurePoint" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-chart"></i></div>
                            <span>特征值度量</span>
                        </a>
                    </li>

                    <li>
                        <a href="/to/usecasePoint" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-chart-pie"></i></div>
                            <span>用例点度量</span>
                        </a>
                    </li>

                    <li>
                        <a href="/to/objectPoint" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-lock-access"></i></div>
                            <span>对象点度量</span>
                        </a>
                    </li>
                    <li class="menu-title">Oriented Object</li>
                    <li>
                        <a href="/toLK/goToLKMetrics" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-sign-in-alt"></i></div>

                            <span>LK度量</span>
                        </a>
                    </li>

                    <li>
                        <a href="/toCK/goToCKMetrics" class="waves-effect mm-active">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-grids"></i></div>
                            <span>CK度量</span>
                        </a>
                    </li>

                </ul>
            </div>
            <!-- Sidebar -->
        </div>
    </div>
    <!-- Left Sidebar End -->
    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">

        <div class="page-content">

            <!-- Page-Title -->
            <div class="page-title-box">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h4 class="page-title mb-1">CK Metrics</h4>
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item active">Welcome to Software Metrics</li>
                            </ol>
                        </div>
                    </div>

                </div>
            </div>
            <!-- end page title end breadcrumb -->

            <div class="page-content-wrapper">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-6">
                                            <h1>CK 度量方法</h1>
                                            <p class="text-muted">Chidamber和Kemerer［7］在1994年发表论文阐述和定义了CK度量集，奠定了面向对象软件度量学理论基础。</p>
                                            <h1 style="color: #3051D3;font-weight: bold">请在下方粘贴您的源代码并提交</h1>
                                            <h1 style="color: #3051D3;font-weight: bold" id="result"></h1>
                                            <div class="mt-4">
                                                <a href="/to/index" class="btn btn-primary btn-sm">了解更多相关内容 <i class="mdi mdi-arrow-right ml-1"></i></a>
                                            </div>
                                        </div>

                                        <div class="col-6 ml-auto" align="right">
                                            <div>
                                                <img src="/newImage/ck.png" alt="" class="img-fluid">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <form class="card" action="/toCK/getClassList" method="post">
                                <div class="card-body">
                                    <h4 style="font-size: 20px" class="header-title">请在此处粘贴源代码</h4>
                                    <div class="form-group">
                                        <div>
                                            <textarea  id="code" name="code" style="overflow:scroll;overflow-x:hidden;resize:none;height: 500px"  required="" class="form-control" rows="5" th:text = "${code}"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group mb-0">
                                        <div align="right">
                                            <input type="submit" class="btn btn-primary waves-effect waves-light mr-1" value="Submit">
                                            <button type="reset" class="btn btn-secondary waves-effect" onclick="return clear();">
                                                Clear
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-4">
                            <div class="card">
                                <div class="card-body">
                                    <h4 style="font-size: 20px;color: #3051D3;" class="header-title">Metrics Knowledge</h4>
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item">
                                            <div class="media my-2">
                                                <div class="media-body">
                                                    <p style="font-size: 16px;color: #FF66C4;font-weight: bold" >WMC(Weighted Methods per Class)</p>
                                                    <br>
                                                    <a href="#" class="card-link" onclick="return show1();">点击了解相关知识——></a>
                                                </div>
                                                <div class="icons-lg ml-2 align-self-center">
                                                    <i class="uim uim-layer-group"></i>
                                                </div>
                                            </div>
                                            <div id="more1" style="display: none">
                                                <p style="font-size: 15px;color: grey;">
                                                <h5>  WMC是什么</h5>
                                                （1） WMC 用于度量类的规模与复杂度；
                                                <br>
                                                （2） 如果类中方法的复杂度都取值为 1，则 WMC=n；
                                                <br>
                                                （3） 方法的复杂度可以用传统的软件设计中的复杂度来计算，如圈复杂度；
                                                <br>
                                                （4） 一个类的 WMC 值越大，表明可能类中的方法数量越多、方法的复杂度越高，也就意味着开发、测试及维护这个类花费的时间和工作量越大；
                                                <br>
                                                （5） 一个方法数量多的类更有可能是面向特殊应用设计的，则该类的可重用性会有局限性；
                                                <br>
                                                （6） 如果父类的 WMC 越大，则会对其子类的潜在影响越大，因为子类在继承时会继承父类的所有方法；
                                                <br>
                                                <a href="#" class="card-link" onclick="return hide1();">收起</a>
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="media my-2">
                                                <div class="media-body">
                                                    <p style="font-size: 16px;color: #FF66C4;font-weight: bold" >RFC(Response For a Class)</p>
                                                    <br>
                                                    <a href="#" class="card-link" onclick="return show2();">点击了解相关知识——></a>
                                                </div>
                                                <div class="icons-lg ml-2 align-self-center">
                                                    <i class="uim uim-analytics"></i>
                                                </div>
                                            </div>
                                            <div id="more2" style="display: none">
                                                <p style="font-size: 15px;color: grey;">
                                                <h5>  RFC是什么</h5>
                                                类的响应集是指对一个类的对象接受的消息进行响应的方法数目。
                                                <br>
                                                （1）RFC 计算一个类中所有方法以及被该类中方法调用的其他类的方法的总数。
                                                <br>
                                                （2）RFC 集合中的方法能够通过类的对象对传递的消息进行回应；
                                                <br>
                                                （3）RFC 一方面反映了类本身定义的方法数量，另一方面反映了一个类与其他类之间的交互性（耦合性）。因此 RFC 体现了类的复杂性。
                                                <br>
                                                <a href="#" class="card-link" onclick="return hide2();">收起</a>
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="media my-2">
                                                <div class="media-body">
                                                    <p style="font-size: 16px;color: #FF66C4;font-weight: bold" >LCOM(Lack of Cohesion)</p>
                                                    <h5 class="mb-0" id="LCOM">LCOM的结果</h5>
                                                    <br>
                                                    <a href="#" class="card-link" onclick="return show3();">点击了解相关知识——></a>
                                                </div>
                                                <div class="icons-lg ml-2 align-self-center">
                                                    <i class="uim uim-ruler"></i>
                                                </div>
                                            </div>
                                            <div id="more3" style="display: none">
                                                <p style="font-size: 15px;color: grey;">
                                                <h5>  LCOM是什么</h5>
                                                （1）内聚描述了为完成一个相同的任务所需要用到的单个类的范围，同时也反映了一个类的封闭性；
                                                <br>
                                                （2）LCOM 反映了类内部方法的内聚程度；一个类中有不同的方法在相同的实例变量集合上完成不同的操作，则这个类是内聚的；
                                                <br>
                                                （3）C&K 认为如果两个方法都使用了类中定义的相同的属性或者变量，则表示两个方法是有关联的，即体现了类的内聚性；反之，则表示两个方法没有关联，即反映类缺乏内聚性；
                                                <br>
                                                （4）问题：C&K 定义计算的内聚缺乏度与类中的方法数有较大的相关性。当两个类的方法数相差较大时，即使计算得到的内聚缺乏度相同，其反映出的类的内聚性是不同的。一般来说，方法数多的类的内聚缺乏度比方法数少的要大。
                                                <br>
                                                <a href="#" class="card-link" onclick="return hide3();">收起</a>
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="media my-2">
                                                <div class="media-body">
                                                    <p style="font-size: 16px;color: #FF66C4;font-weight: bold" >CBO(Coupling Between Objects)</p>
                                                    <h5 class="mb-0" id="CBO">CBO的结果</h5>
                                                    <br>
                                                    <a href="#" class="card-link" onclick="return show4();">点击了解相关知识——></a>
                                                </div>
                                                <div class="icons-lg ml-2 align-self-center">
                                                    <i class="uim uim-box"></i>
                                                </div>
                                            </div>
                                            <div id="more4" style="display: none">
                                                <p style="font-size: 15px;color: grey;">
                                                <h5>  CBO是什么</h5>
                                                对象间的耦合度，反映了类与类之间的耦合性。类是特殊的模块，因此 CBO 也就体现了模块之间的耦合性。消息传递和调用关系可以看作是存在耦合关系的表现。
                                                <br>
                                                （1） CBO 计算了一个类与其他类存在耦合关系的数量，这里耦合关系只考虑非继承关系，即 C、K 认为耦合关系不包括继承关系，只包括依赖关系、实现关系、关联关系、组合关系、聚合关系。
                                                <br>
                                                （2） CBO 值太大不符合模块化设计的原则，且不易于类的重用。如果一个类相对独立，则更容易被重用于其他应用中；
                                                <br>
                                                （3） 为了提高软件的模块化程度，提升类的封装性，则必须保证 CBO 值尽可能小；
                                                <br>
                                                （4） 一个类的 CBO 值越大，则越容易受到其他类的设计变化的影响，也就更难于测试与维护
                                                <br>
                                                <a href="#" class="card-link" onclick="return hide4();">收起</a>
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="media my-2">
                                                <div class="media-body">
                                                    <p style="font-size: 16px;color: #FF66C4;font-weight: bold" >DIT(Depth of Inheritance Tree)</p>
                                                    <h5 class="mb-0" id="DIT">DIT的结果</h5>
                                                    <br>
                                                    <a href="#" class="card-link" onclick="return show5();">点击了解相关知识——></a>
                                                </div>
                                                <div class="icons-lg ml-2 align-self-center">
                                                    <i class="uim uim-flip-v"></i>
                                                </div>
                                            </div>
                                            <div id="more5" style="display: none">
                                                <p style="font-size: 15px;color: grey;">
                                                <h5>  DIT是什么</h5>
                                                类在继承树中的最大深度（层次）。
                                                <br>
                                                （1）根节点的 DIT=0；
                                                <br>
                                                （2）一个类的 DIT 越大，继承深度越深，则其继承得到的方法数越多，也就越难以预测该类的行为；
                                                <br>
                                                （3）一个面向对象的软件系统中 DIT 值越大，则说明系统的设计越复杂，因为这意味着系统中有较多的类和方法
                                                <br>
                                                <a href="#" class="card-link" onclick="return hide5();">收起</a>
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="media my-2">
                                                <div class="media-body">
                                                    <p style="font-size: 16px;color: #FF66C4;font-weight: bold" >NOC(Number of Child)</p>
                                                    <h5 class="mb-0" id="NOC">NOC的结果</h5>
                                                    <br>
                                                    <a href="#" class="card-link" onclick="return show6();">点击了解相关知识——></a>
                                                </div>
                                                <div class="icons-lg ml-2 align-self-center">
                                                    <i class="uim uim-chart-pie"></i>
                                                </div>
                                            </div>
                                            <div id="more6" style="display: none">
                                                <p style="font-size: 15px;color: grey;">
                                                <h5>  NOC是什么</h5>
                                                继承树中一个类的直接孩子的数目。
                                                <br>
                                                （1）NOC 表明了一个父类对设计以及对系统潜在的影响程度，NOC 值越大，说明了父类对子类的影响度越大；
                                                <br>
                                                （2）NOC 越大，说明一个父类拥有较多的子类，在需要对父类的方法进行更多更强的测试.
                                                <br>
                                                <a href="#" class="card-link" onclick="return hide6();">收起</a>
                                            </div>
                                        </li>
                                    </ul>

                                </div>
                            </div>
                        </div>

                        <div class="col-8">
                            <div class="card">
                                <div class="card-body">

                                    <h4 style="font-size: 20px;color: #3051D3;" class="header-title">Metric Result</h4>

                                    <div class="table-responsive">
                                        <table class="table table-editable" style="font-size: 15px">
                                            <thead>
                                                <tr>
                                                    <th>类名</th>
                                                    <th>WMC</th>
                                                    <th>RFC</th>
                                                    <th>DIT</th>
                                                    <th>NOC</th>
                                                    <th>CBO</th>
                                                    <th>LCOM</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody th:each="item,iterStat:${classList}">
                                                <tr>
                                                    <td style="color: #3051D3;font-weight: bold" th:text="${item.name}">AbstractHandleData</td>
                                                    <td th:text="${item.ck.WMC}">5.0</td>
                                                    <td th:text="${item.ck.RFC}">5.0</td>
                                                    <td th:text="${item.ck.DIT}">0.0</td>
                                                    <td th:text="${item.ck.NOC}">3.0</td>
                                                    <td th:text="${item.ck.CBO}">0.0</td>
                                                    <td th:text="${item.ck.LCOM}">0.0</td>
                                                    <td th:onclick="'javascript:setDetailMsgRow(\''+${iterStat.index}+'\')'"><i class="fab fa-500px fas fa-angle-down"></i></td>
                                                </tr>
                                                <tr th:id="${iterStat.index}" style="display: none">
                                                    <td></td>
                                                    <td colspan="7">
                                                        <div class="card">
                                                            <div class="card-body" th:id="'nestable_list_'+${iterStat.index+1}">
                                                                <ol class="dd-list">
                                                                    <li class="dd-item" th:data-id="${iterStat.index}">
                                                                        <div style="font-size: 16px;background-color: #3051d3;color:#FFFFFF;" class="dd-handle">
                                                                            类方法
                                                                        </div>
                                                                        <ol class="dd-list">
                                                                            <li class="dd-item" data-id="02" th:each="operation : ${item.operations}">
                                                                                <div class="dd-handle">
                                                                                    <label class="col-6">类方法返回类型</label>
                                                                                    <label data-value="public" th:text="${operation.visibility}">void</label>
                                                                                    <label class="col-6">类方法名</label>
                                                                                    <label data-value="templatMethod" th:text="${operation.name}">templatMethod</label>
                                                                                </div>
                                                                            </li>
                                                                        </ol>
                                                                    </li>
                                                                    <li class="dd-item" data-id="22">
                                                                        <div style="font-size: 16px;background-color: #3051d3;color:#FFFFFF;" class="dd-handle">
                                                                            子类
                                                                        </div>
                                                                        <ol class="dd-list">
                                                                            <li class="dd-item" data-id="11" th:each="child:${item.children}">
                                                                                <div class="dd-handle" th:text="${child.name}" >
                                                                                    HandleDate1
                                                                                </div>
                                                                            </li>
                                                                        </ol>
                                                                    </li>
                                                                </ol>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                            <tr style="background-color: #3051D3">
                                                <td style="color: white;font-weight: bold;font-size: 20px">CK度量</td>
                                                <td data-original-value="0" colspan="7" style="color: white;font-weight: bold;"><span id="UFC"></span></td>
                                            </tr>
                                        </table>
                                    </div>

                                </div>
                            </div>
                        </div> <!-- end col -->
                    </div> <!-- end row -->
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                                    <div id="main" style="width: 100%;height: 500px"></div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div> <!-- container-fluid -->
            </div>
            <!-- end page-content-wrapper -->
        </div>
        <!-- End Page-content -->


        <footer class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-6">
                        2020 © Software Metric.
                    </div>
                    <div class="col-sm-6">
                        <div class="text-sm-right d-none d-sm-block">
                            Copyright &copy; 2022.Software Engineering 1901 in CSU All rights reserved.
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
    <!-- end main content-->

</div>
<!-- END layout-wrapper -->


<!-- JAVASCRIPT -->
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/metisMenu.min.js"></script>
<script src="/js/simplebar.min.js"></script>
<script src="/js/waves.min.js"></script>
<script src="/js/bundle.js"></script>

<!-- datepicker -->
<script src="/js/datepicker.min.js"></script>
<script src="/js/datepicker.en.js"></script>

<!-- apexcharts -->
<script src="/js/apexcharts.min.js"></script>

<script src="/js/jquery.knob.min.js"></script>

<!-- Jq vector map -->
<script src="/js/jquery.vmap.min.js"></script>
<script src="/js/jquery.vmap.usa.js"></script>

<script src="/js/dashboard.init.js"></script>

<script src="/js/app.js"></script>
<script src="editor.md-master/examples//js/jquery.min.js"></script>
<script src="editor.md-master/editormd.min.js"></script>

<!-- nestable2 js -->
<script src="/js/jquery.nestable.min.js"></script>

<script src="/js/nestable.init.js"></script>

<script src="/js/app.js"></script>
<!--echart-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

<script>
    function setDetailMsgRow(rowID) {
        var row = document.getElementById(rowID);
        if (row != null) {
            if (row.style.display == (document.all ? "block" : "table-row")) {
                row.style.display = "none";
            }
            else {
                row.style.display = (document.all ? "block" : "table-row");
            }
        }

        return false;
    }
</script>
<script>
    function show1()
    {
        var more = document.getElementById("more1");

        more.style.display = "block";

        return false;
    }
    function hide1()
    {
        var more = document.getElementById("more1");

        more.style.display = "none";

        return false;
    }

    function show2()
    {
        var more = document.getElementById("more2");

        more.style.display = "block";

        return false;
    }
    function hide2()
    {
        var more = document.getElementById("more2");

        more.style.display = "none";

        return false;
    }

    function show3()
    {
        var more = document.getElementById("more3");

        more.style.display = "block";

        return false;
    }
    function hide3()
    {
        var more = document.getElementById("more3");

        more.style.display = "none";

        return false;
    }

    function show4()
    {
        var more = document.getElementById("more4");

        more.style.display = "block";

        return false;
    }
    function hide4()
    {
        var more = document.getElementById("more4");

        more.style.display = "none";

        return false;
    }

    function show5()
    {
        var more = document.getElementById("more5");

        more.style.display = "block";

        return false;
    }
    function hide5()
    {
        var more = document.getElementById("more5");

        more.style.display = "none";

        return false;
    }

    function show6()
    {
        var more = document.getElementById("more6");

        more.style.display = "block";

        return false;
    }
    function hide6()
    {
        var more = document.getElementById("more6");

        more.style.display = "none";

        return false;
    }
</script>
<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    console.log("zzzzzzzzzz")

    var className = [];
    var series1 = [];
    var series2 = [];
    var series3 = [];
    var series4 = [];
    var series5 = [];
    var series6 = [];

    $.ajax({
        type: 'post',
        async : false,
        url: 'http://localhost:8099/toCK/setLine',//请求数据的地址
        dataType: "json",        //返回数据形式为json
        success: function (result) {
            console.log(result);
            $.each(result, function (index, item) {
                console.log(item);
                if (index == 0){
                    className.push('product')
                    series1.push('WMC');
                    series2.push('RFC');
                    series3.push('DIT');
                    series4.push('NOC');
                    series5.push('CBO');
                    series6.push('LCOM');
                }
                var temp0 = item.name;
                var temp1 = item.wmc;
                var temp2 = item.rfc;
                var temp3 = item.dit;
                var temp4 = item.noc;
                var temp5 = item.cbo;
                var temp6 = item.lcom;

                className.push(temp0);
                series1.push(temp1);
                series2.push(temp2);
                series3.push(temp3);
                series4.push(temp4);
                series5.push(temp5);
                series6.push(temp6);
            });
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            // alert("图表请求数据失败!");
            echarts.hideLoading();
        }
    });

    setTimeout(function () {
        option = {
            title: {
                text: 'CK度量指标'
            },
            legend: {},
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            dataset: {
                source: [
                    className,series1,series2,series3,series4,series5,series6
                ]
            },
            xAxis: {
                type: 'category' ,
                axisLabel :{interval:0},
                axisPointer: {
                    type: 'shadow'
                }
            },
            yAxis: { gridIndex: 0 },
            grid: { top: '48%' },
            series: [
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '30%',
                    center: ['50%', '23%'],
                    emphasis: {
                        focus: 'self'
                    },
                    label: {
                        formatter: '{b}: {@1} ({d}%)'
                    },
                    encode: {
                        itemName: 'product',
                        value: className[1],
                        tooltip: className[1]
                    }
                }
            ]
        };
        myChart.on('updateAxisPointer', function (event) {
            const xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
                const dimension = xAxisInfo.value + 1;
                myChart.setOption({
                    series: {
                        id: 'pie',
                        label: {
                            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                        },
                        encode: {
                            value: dimension,
                            tooltip: dimension
                        }
                    }
                });
            }
        });
        myChart.setOption(option);
    });

    option && myChart.setOption(option);
</script>
<script>
    function clear()
    {
        var code = document.getElementById("code");

        code.innerText = "";

        return false;
    }
</script>
<!--<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    setTimeout(function () {
        option = {
            title: {
                text: 'CK度量结果',
                textStyle:{
                    //文字颜色
                    color:'#3051D3'
                }
            },
            legend: {},
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            dataset: {
                source: [
                    ['Class', 'Class1', 'Class2', 'Class3', 'Class4', 'Class5', 'Class6'],
                    ['WMC', 5,2,3,4,1,3],
                    ['RFC', 6,2,7,2,4,5],
                    ['DIT', 4,5,2,1,5,3],
                    ['NOC', 7,4,6,2,1,4],
                    ['CBO', 2,0,4,3,5,1],
                    ['LCOM', 4,6,2,3,1,2]
                ]
            },
            xAxis: { type: 'category' },
            yAxis: { gridIndex: 0 },
            series: [
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                }
            ]
        };
        myChart.on('updateAxisPointer', function (event) {
            const xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
                const dimension = xAxisInfo.value + 1;
                myChart.setOption({
                    series: {
                        id: 'pie',
                        label: {
                            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                        },
                        encode: {
                            value: dimension,
                            tooltip: dimension
                        }
                    }
                });
            }
        });
        myChart.setOption(option);
    });

    option && myChart.setOption(option);
</script>-->
</body>
</html>
